<template>
  <div>

  	<flexbox>
	    <flexbox-item>
	      <template>
	        <yd-search :result="result" fullpage v-model="value2" :item-click="itemClickHandler" :on-submit="submitHandler"></yd-search>
	      </template>
	    </flexbox-item>
	</flexbox>

	<flexbox>
	    <flexbox-item>
	    <div style="height: 700px; overflow-y: auto; position: relative;">
  	<yd-scrolltab>
        <yd-scrolltab-panel :label="item.name" 
        v-for="(item, index) in data" :key="index"
        >
            <yd-list theme="4"> 
		        <yd-list-item v-for="i, key in item.list" 
		        @click.native="productinfo(i.code)" :key="key"
		        >
		            <img slot="img" v-lazy="i.pic">
		            <span slot="title">{{i.name}}</span>
		            <yd-list-other slot="other">
		                <div>
		                    <span class="demo-list-price">{{i.msg1}}</span>
		                </div>
		            </yd-list-other>
		            <yd-list-other slot="other">
		                <div>
		                    <span class="red demo-list-price">{{i.msg2}}</span>
		                </div>
		            </yd-list-other>
		           <!--  <yd-list-other slot="other" style="justify-content: space-between;">
		                <div>
		                </div>
		                <div>
		                    <yd-icon name="share1" size=".4rem" color="#FF685D"></yd-icon>
		                </div>
		            </yd-list-other> -->
		        </yd-list-item>
		    </yd-list>

        </yd-scrolltab-panel>
    </yd-scrolltab>
    	</div>
    	</flexbox-item>
	</flexbox>

	<div class="share" v-if="userdata.fx_level == '1' || userdata.fx_level == '2' || userdata.fx_level == '999' ">
		<div class="btn bgred" v-on:click="share()">
			分享
		</div>
	</div>

	<flexbox-item v-show="shareMenuVisible">
	<yd-popup class="shareMenu "
	  v-model="shareMenuVisible"
	  position="bottom">
	  	<div class="btn" v-on:click="shareFriend">分享好友/朋友圈</div>
	  	<!-- <div class="btn" v-on:click="poster">获得海报</div> -->
	  	<div class="btn" v-on:click="productQRCode">货架二维码</div>
	  	<div class="btn"
	  	v-clipboard:copy="shareLink"
	    v-clipboard:success="copyShareLink"
	    v-clipboard:error="onErrorShareLink"
	  	>复制链接</div>
	</yd-popup>
	</flexbox-item>

	<flexbox-item v-if="productQRCodeVisible">
		  <yd-popup class="productQRCode" position="center"
			  v-model="productQRCodeVisible">
			  <div class="text-center">
			  	<qrcode-vue class=""
			  		:value="shareLink" 
			  		:size="180" level="H">
			  	</qrcode-vue>
			  </div>
	  	  </yd-popup>
	</flexbox-item>


	<div class="lyx_mcover" v-show="zhezhao" v-on:click="clickzhezhao()">
		<img :src="URL.shareBgImg" >
	</div>


	<div v-if="qrcodeShow">
	<yd-popup v-model="qrcodeShow" 
	position="center" :masker-opacity=".8" width="280px" 
	>
		<div class="bgwhite text-center pt40" style="width:280px; height:350px;">
		  	<qrcodeimg 
		  	:options="{
				
				'data' : shareLink,
				
			}"></qrcodeimg>
		  	<div class="h2 hui mt25">长按图片保存商城二维码</div>
		</div>
		
	</yd-popup>
	</div>

  </div>

</template>

<script>

import { Cell, Button, IndexList, IndexSection, MessageBox} from 'mint-ui'
import { mapGetters } from 'vuex';
import { cutQueryString, cutImage } from '../../util/util'
import wx from '../../util/weixin';
import QrcodeVue from 'qrcode.vue';
import qrcodeimg from '../util/qrcodeimg'

export default {
	name: 'Goods',
	data () {
		return {
		  	msg: '货架',
		  	shareMenuVisible : false,
		  	zhezhao : false,
		  	productQRCodeVisible : false,
		  	qrcodeShow : false,
		  	result: [],
		  	value2: '',
		}
	},

	components : {
		QrcodeVue,
		qrcodeimg,
	},

	computed : {
		...mapGetters([
			'goodslist', 
			'company_code', 
			'userdata',
			'configureinfo',
			'URL',
		]),

		//用类别编号做对象属性，存对象，
		data () {
			var obj = {
				'default' : {
					'name' : '其他',
					'code' : 'other',
					'list' : [],
				}
			};

			var arr = [];

			var result = [];

			for(var i = 0; i < this.goodslist.length; i++){
				var tmp = this.goodslist[i];
				var msg1 = '价格 : ';
				if(tmp.minguide_price == tmp.maxguide_price){
					msg1 += tmp.minguide_price;
				}else{
					msg1 += tmp.minguide_price + ' - ' + tmp.maxguide_price
				}
				var msg2 = '佣金 : ';
				if(tmp.minprofit == tmp.maxprofit){
					msg2 += tmp.minprofit;
				}else{
					msg2 += tmp.minprofit + ' - ' + tmp.maxprofit;
				}
				tmp['msg1'] = msg1;
				tmp['msg2'] = msg2;


				if(tmp.top_pic == undefined){
					tmp['pic'] = this.URL.defaultImg;
				}else{
					try{
						var ttt = JSON.parse(tmp.top_pic);
		                tmp['pic'] = cutImage(ttt[0]);
					} catch (err) {
						tmp['pic'] = this.URL.defaultImg;
					}
				}

				if(tmp.type_code == undefined || tmp.type_code == null){
					obj.default.list.push(tmp);

				}else{
					//有类别的产品
					if(obj[tmp.type_code] == undefined){
						obj[tmp.type_code] = {
							'name' : tmp.type_name,
							'code' : tmp.type_code,
							'list' : [tmp],
						};
						arr.push(tmp.type_code);
					}else{
						obj[tmp.type_code].list.push(tmp);
					}
				}
			}

			if(this.goodslist.length > 0){
				arr.push('default');
			}

			for(var i = 0; i < arr.length; i++){
				var key = arr[i];
				result.push(obj[key]);
			}

			console.log('obj');
			console.log(obj);
			console.log('arr');
			console.log(arr);
			console.log('result');
			console.log(result);
			return result;
		},


		productnamelist () {
			var arr = [];
			for(var i = 0; i < this.goodslist.length; i++){
				var tmp = this.goodslist[i];
				arr.push(tmp.name);
			}
			console.log(arr);
			return arr;
		},

		shareLink () {
			var link = cutQueryString('u');
			//把页面换掉
			link = cutQueryString('goods', 'page', link, 'goodsforcustomer');
			//var link = cutQueryString('company_code');
			link += '&u=' + this.userdata.user_base;
			console.log(link);
			return link;
		}
	},

	methods : {
		productinfo (productcode) {
			console.log(productcode);
			this.$router.push({ 
				name: 'productinfo', 
				params: { code: productcode },
				query : { 
					'company_code' : this.company_code,
					//'u' : this.userdata.user_base,
				},
			})
		},

		share () {
			this.shareMenuVisible = true;
		},

		shareFriend () {
			this.zhezhao = true;
		},

		clickzhezhao () {
			this.zhezhao = false;
		},

		poster () {},

		productQRCode () {
			//this.productQRCodeVisible = true;
			this.qrcodeShow = true;
			this.shareMenuVisible = false;
		},

		copyShareLink () {
			this.$dialog.alert({'mes' : '复制成功'});
			this.shareMenuVisible = false;
		},

		onErrorShareLink () {
			console.log('无法复制链接');
			this.$dialog.alert({'mes' : '无法复制链接'});
		},

		itemClickHandler(item) {
			console.log('itemClickHandler');
			console.log(item);
			this.$router.push({ 
				name: 'productlist', 
				query : {
					'company_code' : this.company_code,
					'name' : item,
					//'u' : this.$route.query.u,
				},
			});
      	},

		submitHandler(value) {
			console.log('submitHandler');
			this.$router.push({ 
				name: 'productlist', 
				query : {
					'company_code' : this.company_code,
					'name' : value,
					//'u' : this.$route.query.u,
				},
			});
		},

		getResult(val) {
			console.log('getResult');
			console.log(val);
			if (!val) return [];
			return this.productnamelist.filter(value => (new RegExp(val, 'i').test(value)));
		},


	},

	mounted () {
		this.$store.dispatch('getGoodsList', {
			'openid' : this.userdata.user_base,
		});

		this.$store.dispatch('getConfigureinfo', {
			'company_code' : this.company_code,
			'callback' :async (res) => {
				if(this.userdata.fx_level == '1' || this.userdata.fx_level == '2' ){
					var para = {
						'company_code' : this.company_code,
						'name' : res.share_title,
						'img' : res.share_img,
						'desc' : res.share_describe,
						'link' : this.shareLink,
					};
					// wx.weixinShare(para, () => {
					// 	console.log('开始分享');
					// }, () => {
					// 	console.log('分享成功');
					// });


					await wx.weixinShare1(para, () => {
						console.log('开始分享');
						
					}, () => {
						console.log('分享成功');
					}, this.URL.ios);
				}
			}
		});
		
	},

	watch: {
		value2(val) {
			this.result = this.getResult(val);
		}
  	},
}
</script>

<style scoped>

image[lazy=loading] {
  width: 40px;
  height: 40px;
  margin: auto;
}

.share {
	height: 50px;
	width: 100%;
    position:fixed;
    bottom:90px;
}

.share .btn {
	width: 50px;
	height: 50px;
	float: right;
	margin-right: 25px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	border-radius : 25px;
}

.shareMenu {
	width: 100%;
	/*padding-left:10px;
	padding-right:10px;*/
	/*text-align: center;*/
	/*height: 100px;*/
}

.shareMenu .btn {
	font-size: .28rem;
	text-align: center;
	padding: 10px 0;
	border-top : 1px solid #eee;
}

.productQRCode {
	width: 220px;
	height: 210px;
	padding-top : 10px;
}


/*分享功能*/
.lyx_mcover{ position: fixed; top:0;  left:0; width:100%; height:100%;background:rgba(0, 0, 0, 0.7);z-index:20000;}
.lyx_mcover img {position: fixed;right: 18px;top:5px;width: 260px;height: 180px;z-index:20001;}

</style>
